@keyframes octocat {
  0%, 100% {
    transform: rotate(0);
  }
  20%, 60% {
    transform:rotate(-25deg);
  }
  40%, 80% {
    transform: rotate(100deg);
  }
}

.login-page {
  display: flex;
  min-height: 100vh;
  background: #f0f2f5 url("~@/assets/img/public/bg.svg") no-repeat center 110px;
  background-size: 100%;
  flex-direction: column;

  .octo-arm {
    animation: octocat 1.1s linear infinite;
  }

  .svg-wrapper {
    z-index: 10001;
    fill: #20a0ff;
    color: #fff;
    position: fixed;
    top: -6px;
    border: 0;
    right: -6px;

    .octo-arm {
      transform-origin: 130px 106px;
    }
  }

  .wrap {
    flex: 1;
    margin-top: 90px;
    width: 320px;
    align-self: center;
  }

  .ant-input-affix-wrapper:not(:nth-child(1)) {
    margin-top: 20px;
  }

  .anticon {
    color: #0000004d;
  }

  .logo-wrap {
    margin-bottom: 30px;
    text-align: center;

    .logo {
      width: 96px;
      height: 96px;
      -webkit-user-drag: none;
    }

    em {
      font-size: 24px;
      font-weight: bold;
      color: #000;
      margin-left: 15px;
      vertical-align: text-top;
    }
  }

  .captcha {
    display: block;
    cursor: pointer;
    height: 30px;
    border-left: 1px solid #ccc;
  }

  .register {
    margin-top: 15px;
    text-align: right;
    color: $theme-color;
  }
}